import React,{Component} from 'react';
import {connect} from 'react-redux'
import  {fetchList}  from '../actions'
import { Pagination, PaginationItem, PaginationLink , Breadcrumb , BreadcrumbItem} from 'reactstrap';
import { NavLink } from 'react-router-dom'

var PAGE=1;
const mapStateToProps = (state)=>{
    return {
        ...state.product
    }
}

class Product extends Component{
    componentDidMount(){
        this.props.fetchList();     
    }

    //显示一页产品
    showPro(){
        var list=this.props.list.pageData
        if(list.length > 0){
            var jxt=[];
            for(let i=0;i<list.length;i++){
                var url=`/product/${i}`;
                jxt.push(
                    <NavLink to={url} key={i} style={{color:"#000"}}>
                        <div className="col-sm-6 col-md-4" key={i} >
                            <div className="thumbnail" style={{backgroundColor:"#f5f5f5",padding:"10px"}}>
                                <img src={list[i].img} style={{width:"200px",height:"150px"}}/>
                                <div className="caption" style={{textAlign:"center"}}>
                                    <h4>{list[i].name}</h4>
                                    <p style={{color:"#f40"}}>￥{list[i].price}</p>
                                </div>
                            </div>
                        </div>
                    </NavLink>
                )
            }
            return jxt;
        }else{
            return null;
        }
        
    }

    //显示分页条
    Paging(){
        var pages=this.props.list.total /12;   
        var paging=[];
        for(let i=1;i<=pages;i++){
            paging.push(
                <PaginationItem key={i} onClick={()=>this.changePage(i)}>
                    <PaginationLink href="javascript:void(0)">
                    {i}
                    </PaginationLink>
                </PaginationItem>
            )
        }
        return paging;
    }
    
    //跳转页
    changePage(page){
        this.props.fetchList({page}); 
        PAGE=page;
    }
    render(){
        const {list,fetchList}=this.props;                 
        return (
            <div style={{overflow:"hidden",fontSize:"1.5rem"}}>
                <div style={{overflow:"hidden"}}>
                    <div className="panel panel-success" style={{fontSize:"1.5rem"}}>
                        <div className="panel-body">
                            {this.showPro()}
                        </div>
                    </div>
                </div>
                <div >
                    <Pagination aria-label="Page navigation example" style={{width:"380px",display:"block",margin:"0 auto"}}>
                        {/* <PaginationItem>
                            <PaginationLink previous href="#" />
                        </PaginationItem> */}
                        {this.Paging()}
                        {/* <PaginationItem>
                            <PaginationLink next href="/#/product/next" />
                        </PaginationItem> */}
                    </Pagination>
                </div>               
            </div>
        )
   }
}

export default connect(mapStateToProps,{fetchList})(Product);
